import { ModalType, type ModalConfig } from "@/models/modalModel"
import { useModel } from "@umijs/max"
import ErrorInfoModal from "./components/ErrorInfoModal"
import NotificationModal from "./components/NotificationModal"
import OfflineModal from "./components/OfflineModal"

const GlobalModal = () => {
  const { modalList, hideModal } = useModel("modalModel")

  const renderModal = (modal: ModalConfig) => {
    // console.log("in renderModal() ", modal)
    switch (modal.type) {
      case ModalType.ErrorInfo:
        return (
          <ErrorInfoModal
            key={modal.type}
            config={modal}
            onCancel={() => hideModal(modal.type)}
          />
        )
      case ModalType.Notification:
        return (
          <NotificationModal
            key={modal.type}
            config={modal}
            onCancel={() => hideModal(modal.type)}
          />
        )
      case ModalType.Offline:
        return (
          <OfflineModal
            key={modal.type}
            visible={modal.visible}
            onCancel={() => hideModal(modal.type)}
          />
        )
      default:
        return null
    }
  }

  return <>{modalList.map(renderModal)}</>
}

export default GlobalModal
